//引入vue-router,并使用
import VueRouter from "vue-router";
import Vue from "vue"
Vue.use(VueRouter)

import Home from "../pages/Home.vue"   //一般引入方式
import About from "../pages/About.vue"
import Message from "../pages/Message.vue"
import News from "../pages/News.vue"
import MessageDetail from "../pages/MessageDetail.vue"

const News = ()=>import("../pages/MessageDetail.vue") //路由懒加载
const MessageDetail = ()=>import("../pages/MessageDetail.vue") //路由懒加载
const Message = ()=>import("../pages/MessageDetail.vue") //路由懒加载
const Home = ()=>import("../pages/MessageDetail.vue") //路由懒加载
//配置路由
let router = new VueRouter({
    //设置路由模式 hash和history
    mode: 'hash',  //默认为hash
    routes: [
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: '/home/message',
                    component: Message,
                    children: [
                        {
                            name: 'detail',
                            //传递params参数  ?代表params参数可传可不传
                            path: '/home/message/detail/:id?',
                            component: MessageDetail,
                            //路由独享守卫
                            beforeEnter: (to, from) => {
                                console.log(to)
                                next(false)
                              },
                        }
                    ]
                },
                {
                    path: '/home/news',
                    component: News
                },
                {
                    path: '/home/',
                    redirect: 'message'
                }
            ]
        },
        {
            path: '/about',
            component: About
        },
        //重定向
        {
            path: '/',
            redirect: '/home',

        },
    ]
})

export default router

//全局前置守卫
router.beforeEach((to, from, next) => {
    console.log(to) //要去往的路由信息
    console.log(from) //从哪个路由跳转来的
    //可以对路由跳转进行拦截
    next()//通过
    next('/home') //跳转到home路由
    next(false) //从哪来回哪去
  })
//全局后置守卫
router.afterEach((to, from) => {
    
  })